<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->

<head>
    <include file="Public:head"/>
    <link rel="stylesheet" href="__PUBLICCOMMON__/plugins/daterangepicker/daterangepicker.css">
</head>

<body>
<section id="container" style="background: #fff">
    <include file="Public:header"/>
    <!--sidebar left start-->
    <include file="Public:siderbar"/>

    <section class="main-content-wrapper">
        <section id="main-content">
            <div class="data-top">
                <div class="title-bar clearfix">
                    <h5>趋势分析</h5>
                    <!--<div>2017-12-4号</div>-->
                </div>
                <div class="control-bar">
                    <div class="list">
                        <span>时间：</span>
                        <button class="current date" data-id="today">今天</button>
                        <button class="date" data-id="yes">昨天</button>
                        <button class="date" data-id="week">最近一周</button>
                        <button class="date" data-id="month">最近一月</button>
                        <!--<span style="margin-left: 20px">自定义时间</span>
                        <input type="text" id="diy-date">
                        <button class="date" data-id="diy">确认</button>-->
                    </div>
                    <!--<div class="list">
                        <span>时间分布：</span>
                        <button class="current">按时</button>
                        <button class="">按天</button>
                        <button class="">按周</button>
                        <button class="">按月</button>
                    </div>-->
                  <!--  <div  class="list">
                        <span>时间对比：</span>
                        <input type="text" id="pk-date1">
                        <input type="text" id="pk-date2">
                        <button class="current">确认</button>
                    </div>-->
                   <!-- <div  class="list">
                        <span>访客：</span>
                        <button class="current">全部</button>
                        <button class="">新访客</button>
                        <button class="">旧访客</button>
                    </div>-->
                </div>
            </div>


            <div class="main">
                <div class="row">
                    <div class="col-md-3 col-sm-6">
                        <div class="dashboard-tile detail tile-red">
                            <div class="content">
                                <h1 class="text-left timer" id="visite">{$visite}</h1>
                                <p>访问量</p>
                            </div>
                            <div class="icon"><i class="fa fa-users"></i>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-6">
                        <div class="dashboard-tile detail tile-turquoise">
                            <div class="content">
                                <h1 class="text-left timer" id="old_visite">{$old_visite}</h1>
                                <p>老用户</p>
                            </div>
                            <div class="icon"><i class="fa fa-comments"></i>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-6">
                        <div class="dashboard-tile detail tile-blue">
                            <div class="content">
                                <h1 class="text-left timer" id="new_visite">{$new_visite}</h1>
                                <p>新用户</p>
                            </div>
                            <div class="icon"><i class="fa fa fa-envelope"></i>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-6">
                        <div class="dashboard-tile detail tile-purple">
                            <div class="content">
                                <h1 class="text-left timer" id="time">{$time|intval}s</h1>
                                <p>平均时常</p>
                            </div>
                            <div class="icon"><i class="fa fa-bar-chart-o"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </section>
    </section>
</section>
    <!--main content end-->


</section>
<include file="Public:js"/>
<script src="__PUBLICCOMMON__/plugins/daterangepicker/moment.min.js"></script>

<script src="__PUBLICCOMMON__/plugins/daterangepicker/daterangepicker.js"></script>
<script>
    $(function () {

        $('.control-bar button').click(function () {
            $(this).parent('div').find('button').removeClass('current')
            $(this).addClass('current')

        })

        var local_options = {
            format:'YYYY-MM-DD',
            applyLabel: '确认',
            cancelLabel: '取消',
            daysOfWeek: '周日_周一_周二_周三_周四_周五_周六'.split('_'),
            monthNames:'一月_二月_三月_四月_五月_六月_七月_八月_九月_十月_十一月_十二月'.split('_')
        }
        $('#pk-date1').daterangepicker({
            locale:local_options
        },function () {

        })
        $('#pk-date2').daterangepicker({
            locale:local_options
        },function () {

        })
        $('#diy-date').daterangepicker({
            locale:local_options
        },function () {

        })

        $('.date').click(function () {
            var id = $(this).data('id');
            if(id === 'diy'){
                id = $('#diy-date').val();
            }
            console.log("{:U('Admin/getData')}?time="+id)
            $.ajax({
                type: "GET",
                url: "{:U('Admin/getData')}?time="+id,
                success: function (result) {
                    result = JSON.parse(result);
                    $('#visite').text(result.visite);
                    $('#old_visite').text(result.old_visite);
                    $('#new_visite').text(result.new_visite);
                    $('#time').text(result.time+'s');
                }
            });
        })
    })

</script>

</body>

</html>
